<template>
  <!--  前台主页-->
  <div class="container" style="background-color: white;">
    <!--  左侧logo-->
    <div style="display: flex;height:90px;line-height: 50px;">
      <div style="width:300px;display: flex;padding-left: 30px">
        <div style="width: 60px">
          <img alt="前logo" src="../../assets/logo.png" style="width:60px;position: relative;top:10px;"/>
        </div>
        <img alt="前logo" src="../../assets/hfw.png" style="width:200px;position: relative;"/></div>

      <!--导航-->
      <div style="flex:1;margin-top:5px;margin-bottom: 10px">
        <el-card style="height: 80px;width: 110vh;text-align: center;display:flex;justify-content: center;">
          <el-menu
              :default-active="activeIndex"
              active-text-color="#D2B599FF"
              class="el-menu-demo"
              mode="horizontal"
              router
              text-color="#2c3e50"
          >
            <el-menu-item index="/front/home">首页</el-menu-item>
            <el-menu-item index="/front/shop">汉服商城</el-menu-item>
            <el-menu-item index="/front/knowledge">历史知识</el-menu-item>
            <el-menu-item index="/front/cart">购物车</el-menu-item>
            <el-menu-item index="/front/contract">联系我们</el-menu-item>
            <el-menu-item index="/front/uLogin">登录/注册</el-menu-item>
          </el-menu>
        </el-card>
      </div>
      <!--  用户图标 -->
      <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;">
        <el-dropdown style="width: 150px;cursor: pointer;text-align: center">
          <div style="display: inline-block">
            <img alt="" src="@/assets/logo.png"
                 style="width: 45px;height: 45px;border-radius: 50%;position: relative;top:10px;right: 8px;">
            <span>张三</span><i class="el-icon-arrow-down"
                                style="margin-left: 5px;justify-content: center;align-items: center;"></i>
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center;text-decoration: none">
            <!--            <el-dropdown-item style="font-size: 15px;padding: 5px 0">
                          <router-link to="/person" style="text-decoration: none;color: #606266">个人信息</router-link>
                        </el-dropdown-item>-->
            <el-dropdown-item style="font-size: 15px;padding: 5px 0">
              <router-link style="text-decoration: none;color: #606266" to="/front/orders">我的订单</router-link>
            </el-dropdown-item>
            <el-dropdown-item style="font-size: 15px;padding: 5px 0" @click.native="logout">
              <div style="text-decoration: none">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Front",
  data() {
    return {
      activeIndex: '/front/home' // 默认激活的菜单项
    }
  }
}
</script>

<style>

.container {
//background: url("@/assets/banner/bg1.jpg") no-repeat; background-size: 100% 100%; margin: 0; padding: 0;
  height: 100vh;
  width: 100%;
}

.el-menu-demo .el-menu-item {
  font-size: 18px;
}

.el-menu-item:hover {
  color:  #D2B599FF;
}

</style>
